<style lang="scss" scoped>
.login {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: url("../assets/loginBg.jpg") center/cover no-repeat;
    .loginBox {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -60%);
        width: 460px;
        height: 340px;
        background-color: #fff;
        .modelBody {
            .loginBottom {
                text-align: right;
                font-size: 14px;
                a {
                    color: #1f2d3d;
                }
            }
        }
    }
}
</style>

<template>
<div class="login">
	<div class="loginBox modelBox">
		<div class="modelHead">登&nbsp;&nbsp;&nbsp;&nbsp;录</div>
		<div class="modelBody">
			<el-form class="ruleForm" ref="ruleForm" :model="ruleForm" :rules="rules">
				<el-form-item prop="username">
					<el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<!-- <el-form-item prop="authCode" class="messBox">
                    <el-input class="messInput" v-model="ruleForm.authCode" placeholder="验证码" auto-complete="off" :maxlength="6"></el-input>
                    <send-mess :username="ruleForm.username"></send-mess>
                </el-form-item> -->

				<el-button type="primary" class="submit" @click="login('ruleForm')">登陆</el-button>
			</el-form>

			<div class="loginBottom">
				<router-link :to="{ 'name': 'Register'}">实名注册</router-link>
				<router-link :to="{ 'name': 'FindPass'}">忘记密码</router-link>
			</div>
		</div>
	</div>

</div>
</template>

<script>
import Util from '../libs/util'
import SendMess from '../components/sendMess'

export default {
	data() {
		return {
			loginLoading: false,
			ruleForm: {
				username: 'admin',
				password: '123456',
			},
			rules: {
				username: [{
					validator: (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请输入用户名'));
						} else {
							callback();
						}
					},
					trigger: 'blur'
				}],
				password: [{
					validator: (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请输入密码'));
						} else {
							callback();
						}
					},
					trigger: 'blur'
				}],
				// authCode: [{
				//     validator: (rule, value, callback) => {
				//         //let ereg=/^\d+$/;
				//         if (value === '') {
				//             callback(new Error('请输入手机验证码'));
				//         } else if (value == this.$store.state.authCode.data.authCode) {
				//             callback();
				//         } else {
				//             callback(new Error('验证码校验不通过'));
				//         }
				//     },
				//     trigger: 'blur'
				// }]
			}
		}
	},
	methods: {
		//判断登陆
		isLogin() {
			let loginInfo = Util.getCookie('login') || {}
			if (loginInfo.authCode && loginInfo.username && loginInfo.password) {
				this.$store.dispatch('loginPage_login', {
					'authCode': loginInfo.authCode,
					'username': loginInfo.username,
					'userpass': loginInfo.password
				}).then(() => {
					this.$router.push({
						'name': 'UserCenter'
					})
				})
			}
		},
		//登陆
		login(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$store.dispatch('loginPage_login', this.ruleForm).then((data) => {
						this.$message({
							message: '登陆成功，3秒后跳转',
							type: 'success'
						})
						setTimeout(() => {
							this.$router.push({
								'name': 'UserCenter'
							})
						}, 3000)
					}).catch(err => {
						if (err) {
							this.$message({
								message: err.mess,
								type: 'error'
							})
						} else {
							this.$message({
								message: '登陆失败',
								type: 'error'
							})
						}
					})
				} else {
					this.$message({
						message: '请填写用户名和密码',
						type: 'error'
					})
					return false
				}
			});
		}
	},
	beforeMount: function() {
		// this.isLogin()
	},
	mounted: function() {
		Util.title('登陆')
	},
	components: {
		SendMess
	}
}
</script>
